<template>
	<!-- 我的评论页面 -->
	<view>
		<navBar :title="'我的评论'"></navBar>

		<u-subsection :list="list" :current="current" :animation="true" bold active-color="#2979ff"
			@change="changeCurrent">
		</u-subsection>

		<!-- 博客评论 -->
		<view v-show="current === 0" class="commentList">
			<view v-for="(item,index) in blogComment" :key="item.id" class="commentList-item" @click="toBlog(item.blog_id)">
				<view class="commentList-item-thing">
					<view class="commentList-item-thing-img">
						<u-image width="100%" height="110rpx" :src="item.img" :fade="true" duration="500">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
					<view class="commentList-item-thing-title">
						<text>{{item.title}}</text>
					</view>
				</view>
				<view class="commentList-item-text">
					<text style="font-size: 33rpx;">评论内容:</text>
					<text>{{item.comment_text}}</text>
				</view>
				<view class="commentList-item-time">
					<text>{{item.updatedAt}}</text>
					<u-button type="error" size="mini" @click.stop="del(item)">删除</u-button>
				</view>
			</view>

		</view>

        <!-- <u-modal v-model="blogshow" title="警告" :content="content" show-cancel-button @confirm="del()"></u-modal> -->

		<!-- 视频评论 -->
		<view v-show="current === 1" class="commentList">
			<view v-for="(item,index) in videoComment" :key='item.id' class="commentList-item" @click="toVideo(item.video_id)">
				<view class="commentList-item-thing">
					<view class="commentList-item-thing-img">
						<u-image width="100%" height="110rpx" :src="item.img" :fade="true" duration="500">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
					<view class="commentList-item-thing-title">
						<text>{{item.video_name}}</text>
					</view>
				</view>
				<view class="commentList-item-text">
					<text style="font-size: 33rpx;">评论内容:</text>
					<text>{{item.comment_text}}</text>
				</view>
				<view class="commentList-item-time">
					<text>{{item.updatedAt}}</text>
					<u-button type="error" size="mini" @click.stop="del2(item)">删除</u-button>
				</view>
			</view>
		</view>

		<u-toast ref="uToast" />

		<u-loadmore :load-text="loadText" margin-bottom="50" :status="status" @loadmore="nomore" />
	</view>
</template>

<script>
	import {
		getUserBlogComment,
		getUserVideoComment,
		deleteUserBlogComment,
		deleteUserVideoComment
	} from '../../utils/user.js'

	export default {
		data() {
			return {
				//加载更多的状态
				status: 'loadmore',
				list: [{
						name: '博客评论'
					},
					{
						name: '视频评论'
					}
				],
				current: 0,
				//用户id
				user_id: '',
				pageNum: 1,
				pageSize: 7,
				//用户博客评论列表
				blogComment: [],
				//用户视频评论列表
				videoComment: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				btnWidth: 180,
				//改变加载更多的文字
				loadText: {
					loadmore: '点击加载更多内容',
					loading: '正在加载,请喝杯奶茶',
					nomore: '没有更多了'
				},
				content:'确定要删除吗?',
				blogshow:false,
				videoShow:false
			};
		},
		methods: {
			//提示没有更多了
			nomore() {
				this.$refs.uToast.show({
					title: '没有更多了',
					type: 'success',
					duration: 1000
				})
				this.status = 'nomore'
			},
			//获取用户评论数据
			async getUser() {
				if (this.current === 0) {
					let result = await getUserBlogComment(this.user_id, this.pageNum, this.pageSize)
					if (result.code === 200) {
						this.blogComment = [...this.blogComment, ...result.data]
						this.status = 'loadmore'
						if (result.data.length === 0) {
							this.status = 'nomore'
						}
					}
				} else {
					let result = await getUserVideoComment(this.user_id, this.pageNum, this.pageSize)
					if (result.code === 200) {
						this.videoComment = [...this.videoComment, ...result.data]
						this.status = 'loadmore'
						if (result.data.length === 0) {
							this.status = 'nomore'
						}
					}
				}
			},
			//改变选择状态
			async changeCurrent(index) {
				this.current = index
				this.pageNum = 1
				if (this.current === 0) {
					let result = await getUserBlogComment(this.user_id, this.pageNum, this.pageSize)
					if (result.code === 200) {
						this.blogComment = result.data
					}
				} else {
					let result = await getUserVideoComment(this.user_id, this.pageNum, this.pageSize)
					if (result.code === 200) {
						this.videoComment = result.data
						console.log(this.videoComment)
					}
				}
				this.status = 'loadmore'
			},
			// 删除博客评论
			async del(item) {
				let index = this.blogComment.indexOf(item)
				let data = {
					id: item.id,
					user_id: this.user_id,
					blog_id: item.blod_id
				}
				let result = await deleteUserBlogComment(data)
				if (result.code === 200) {
					this.blogComment.splice(index, 1);
					console.log(this.blogComment)
					this.$refs.uToast.show({
						title: '删除成功',
						type: 'success',
						duration: 1000,
					})
				}
			},
			//删除视频评论
			async del2(item) {
				let index = this.videoComment.indexOf(item)
				let data = {
					id: item.id,
					user_id: this.user_id,
					video_id: item.video_id
				}
				let result = await deleteUserVideoComment(data)
				if (result.code === 200) {
					this.videoComment.splice(index, 1);
					this.$refs.uToast.show({
						title: '删除成功',
						type: 'success',
						duration: 1000,
					})
				}
			},
			//去博客详情
			toBlog(id){
				uni.navigateTo({
					url:`/subpkg/blogDetail/blogDetail?blog_id=${id}`
				})
			},
			//去视频详情
			toVideo(id) {
				uni.navigateTo({
					url: `/subpkg/videoDetail/videoDetail?id=${id}`
				})
			},
		},
		onReachBottom() {
			if (this.status === 'nomore') {
				return
			} else {
				this.pageNum++
				this.status = 'loading'
				setTimeout(() => {
					this.getUser()
				}, 500)
			}
		},
		onLoad() {
			this.user_id = uni.getStorageSync('userInfo').user_id
			this.getUser()
		},
		onHide() {

		}
	}
</script>

<style lang="scss" scoped>
	.commentList {
		width: 90%;
		margin: 0 auto;
		padding-top: 40rpx;

		.commentList-item {
			width: 100%;
			padding-bottom: 10rpx;
			border-bottom: 1px solid #c8c9cc;
			margin-bottom: 70rpx;

			.commentList-item-thing {
				display: flex;

				.commentList-item-thing-img {
					width: 30%;

					// image {
					// 	width: 100%;
					// 	height: 90rpx;
					// }
				}

				.commentList-item-thing-title {
					width: 70%;
					padding-left: 40rpx;
					font-size: 27rpx;

				}
			}

			.commentList-item-text {
				font-size: 40rpx;
				font-weight: bold;
				padding: 20rpx 0;
				display: flex;
				flex-direction: column;
			}

			.commentList-item-time {
				font-size: 24rpx;
				color: #82848a;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>
